<template>
    <div class="aui-m-slider">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in recommendData" :key="item.id">
                <van-image
                    :src="item.thumb_cdn"
                />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="clear"></div>
    <div class="lqgwBox">
        <ul>
            <li v-for="item in TypeData" :key="item.id">
                <router-link :to="{path:'/product/product/index',query:{typeid:item.id}}">
                    <img :src="item.thumb_cdn">
                    <p>{{item.name}}</p>
                </router-link>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    
    <div class="clear"></div>
    <div class="contitbox">
        <p>新品</p>
    </div>
    <div class="clear"></div>
    <ul class="proul">
        <li v-for="item in newData" :key="item.id">
            <div class="con">
                <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
                    <img :src="item.thumb_cdn" style="width:218px;height:230px">
                    <p style="width:218px;"><span>￥</span>{{item.price}}</p>
                </router-link>
            </div>
        </li>
    </ul>
    
    <div class="clear"></div>
    <div class="contitbox">
        <p>热销</p>
    </div>
    <div class="clear"></div>
    <ul class="proul_2">
        <li v-for="item in hotData" :key="item.id">
            <div class="con">
                <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
                    <img :src="item.thumb_cdn" style="width:150px;height:191px">
                    <p style="width:150px;"><span>￥</span>{{item.price}}</p>
                </router-link>
            </div>
        </li>
    </ul>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="clear"></div>
    <Footer />
</template>
<script setup>
import Footer from './common/Footer.vue';
import { getCurrentInstance, onMounted, ref } from 'vue';

const { proxy } = getCurrentInstance();
const recommendData = ref([]);
const TypeData = ref([]);
const newData = ref([]);
const hotData = ref([]);

onMounted(() => {
    getHomeData();
});

const getHomeData = async () => {
    let result = await proxy.$api.ControllerIndex();

    if(result.code === 1)
    {
        recommendData.value = result.data.recommendData;
        TypeData.value = result.data.TypeData;
        newData.value = result.data.newData;
        hotData.value = result.data.hotData;
    }
}

</script>
